scss/less书写建议

属性书写顺序

1. 位置属性(position, top, right, z-index, display, float等)

2. 大小(width, height, padding, margin)

3. 文字系列(font, line-height, letter-spacing, color- text-align等)

4. 背景(background, border等)

5. 其他(animation, transition等)

总结: 建议遵循 布局定位属性–>自身属性–>文本属性–>其他属性

/*推荐顺序*/
.example {
  position: absolute;
  width: 100px;
  font-size: 20px;
  background-color: #ccc;
}

/*不推荐顺序*/
.example {
  width: 100px;
  background-color: #ccc;
  position: absolute;
  font-size: 20px;
}

属性用法规范

1. 缩进：建议使用4个空格做为一个缩进层级

2. 非特殊场景尽量少使用!important，如果使用须添加必要的注释

3. 属性定义必须另起一行，且属性定义后以分号结尾

4. 选择器与”{“之间必须包含空格；属性名与之后的”:”之间不允许包含空格；”:”与属性值之间必须包含空格

5. 尽量少使用将样式的定义写在标签中（如内联样式：style=”color:red;”），也不要用js为元素添加内联样式

属性简写

如padding,margin,font,color等等

/*推荐写法*/
.example {
  padding: 5px 10px;
}

/*不推荐写法*/
.example {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
}

小数点前面的’0’建议去除

/*推荐写法*/
.example {
  font-size: .8rem;
}

/*不推荐写法*/
.example {
  font-size: 0.8rem;
}

使用十六进制表示颜色值

css 中的颜色值可以使用十六进制来表示，在可能的情况下，可以进行缩写，比如：#abf,#ccc

嵌套规则

嵌套层级不超过四个层级。

在scss,less中可以嵌套选择器，可以提升代码的简洁性和可读性，但是应该尽量避免使用没有任何内容的选择器

应遵循scss/less嵌套顺序：
a.当前选择器的@extend和@include

b.当前选择器的样式属性

c.父级选择器的伪类选择器（:first-child,:active等）

d.伪类元素（:before,:after）

e.父级选择器的声明样式

f.用 scss 的上下文媒体查询

g.子选择器